<template>
	<view>
		<view class="login">
			<view class="logo">
				小智到家
			</view>
			<form>
			<view class="zh">
				<view class="zh1">账号:</view>
				<input class="zh2" type="text" v-model="phone" placeholder="请输入账号"/>
			</view>
			<view class="mm">
				<view class="mm1">密码:</view>
				<input class="mm2" password v-model="password" placeholder="请输入密码"/>
			</view>
			<view class="dl" @click="onSubmit">
				登录
			</view>
			</form>
		</view> 
	</view>
</template>
<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app';
import { reactive, toRefs } from 'vue'
import { UserStore } from '../../store/user';
const userStore = UserStore()
const state = reactive({
	 phone: '', password: ''
})

const onSubmit = async () => {
	const { phone, password } = state
	if (!phone || !password) return uni.showToast({ title: '用户名或密码不能为空' , icon: 'none'})
	await userStore.login({ username: phone ,password: password })
	uni.switchTab({ url: '/pages/my/my' })
	uni.showToast({
		title: '登录成功',
		icon: 'none'
	})
}
// 页面加载
onLoad((message) => {
	
})

// 页面显示
onShow(() => {
	
})

// 页面隐藏
onHide(() => {
	
})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {
	
})
const { phone, password } = toRefs(state)
</script>

<style lang="scss">
	.login {
		.logo {
			text-align: center;
			color: red;
			font-weight: 900;
			font-size: 100rpx;
			margin: 100rpx 0;
		}
		.zh {
			width: 600rpx;
			margin: 0 auto;
			.zh1{
				float: left;
				font-size: 20px;
				color: darkcyan;
			}
			.zh2 {
				display: inline-block;
				margin-left: 40rpx;
				width: 430rpx;
				padding-left: 20rpx;
				height: 60rpx;
				background-color: #eee;
			}
		}
		.mm {
			width: 600rpx;
			margin: 30rpx auto;
			.mm1 {
				float: left;
				font-size: 20px;
				color: darkcyan;
			}
			.mm2 {
				display: inline-block;
				margin-left: 40rpx;
				width: 430rpx;
				padding-left: 20rpx;
				height: 60rpx;
				background-color: #eee;
			}
		}
		.dl {
			width: 70%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			margin-top: 100rpx;
			margin-left: 120rpx;
			font-weight: 700;
			color: #fff;
			background-color: red;
		}
	}
</style>
